<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<link rel="stylesheet" type="text/css" href="../css/aui.css" />

		<style>
    	html,body{
    		height:100%;
    		background:rgba(0,0,0,0);
    	}
    	#body{
    		height:100%;
    		position:absolute;
    		width:100%;
    		z-index: 1;
	    	background:rgba(0,0,0,0.2);
    	}
    	.text-content-tips{

    		position:absolute;

    		left:0;
    		z-index:200;
    		display:block;
    		background-color: #03A9F4;
    		color: white;
    		text-align:center;
    		width: 100%;
    		top:-1.8rem;
    		height:1.8rem;
    		line-height: 1.8rem;
    		font-size: 0.8rem;
    	}
    	#audio_div {
    		height: 10.5rem;
    	}
    	#audio-content{
    		display:block;
    		width:100%;
    		height: 100%;
    		background-color:white;
    		position:relative;
    	}
    	#time_div{
    		position:absolute;
    		font-size: 0.8rem;
    		color: #03a9f4;
    		font-weight: 400;
    		width:100%;
    		text-align: center;
    		top: 1rem;
    	}
    	#btn_audio_preview{
    		opacity:0; color: #BDBDBD; font-size: 0.6rem;margin-right:0.2rem;
    		display:inline;
    	}
    	#btn_audio_cancel{
    		color: #BDBDBD; font-size: 0.6rem;margin-left:0.2rem;opacity:0;
    		display:inline;
    	}
    	.audio_time_lr{
    		height: 0.4rem;
    		display:inline;
    	}
    	.tab_area_div{
    		position:absolute;
    		z-index:100;
    		bottom:0;
    		left:0;
    		width: 100%;
    		display: none;
    	}
		</style>
	</head>
	<body>
		<input type="hidden" id="tab_div">
		<div id="body"></div>

		<div id='video_div' class="tab_area_div">
			<div class="text-content-tips"></div>
			<div class="aui-grid">
			    <div class="aui-row">
				    <div class="aui-col-xs-6" id="smalllive" style="display:none;">
			            <i class="aui-iconfont aui-icon-video"></i>
			            <div class="aui-grid-label">小直播</div>
			        </div>
			        <div class="aui-col-xs-6" id="fulllive">
			            <i class="aui-iconfont aui-icon-video"></i>
			            <div class="aui-grid-label">横屏直播</div>
			        </div>
			        <div class="aui-col-xs-6" id="pclive">
			            <i class="aui-iconfont aui-icon-video"></i>
			            <div class="aui-grid-label">PC推流地址</div>
			        </div>
			    </div>
			</div>
		</div>


		<div id="audio_div"  class="tab_area_div">
			<div class="text-content-tips"></div>
			<div class="aui-content" id="audio-content">

				<div id="time_div" class="top_div_group" >
					<div tapmode id="btn_audio_preview" class="btn_audio_operate_group aui-btn aui-btn-outlined" >试听</div>
					<img class="audio_time_lr" src="../res/room/audio_time_left.png">
					&nbsp;<span id="audio_time">0</span>s&nbsp;:&nbsp;60s&nbsp;
					<img class="audio_time_lr" src="../res/room/audio_time_right.png">
					<div tapmode id="btn_audio_cancel" class="btn_audio_operate_group aui-btn aui-btn-outlined">取消</div>
				</div>

				<div style="position:absolute; left:50%;margin-left:-2.4rem;top:50%;margin-top:-2.4rem;">
					<img id="btn_audio_record" class="btn_audio_group" src="../res/room/btn_audio_record.png" style="width:4.8rem;" tapmode>
					<img id="btn_audio_stop" class="btn_audio_group" src="../res/room/btn_audio_stop.png" style="width:4.8rem; display:none;" tapmode>
					<img id="btn_audio_send" class="btn_audio_group" src="../res/room/btn_audio_send.png" style="width:4.8rem; display:none;" tapmode>
					<img id="btn_audio_voice" class="btn_audio_group" src="../res/room/voice_1.png" style="width:4.8rem; display:none;" tapmode>
					<div style="background-color: #03a9f4;height: 0.3rem;width: 0.3rem;border-radius: 50%;margin-left: auto;margin-right: auto;margin-top:0.35rem;">
					&nbsp;
					</div>
				</div>
			</div>

			<div style="position:absolute;width:100%;text-align: center;bottom:1.1rem;">
				<div style="font-size: 0.6rem;color: #BDBDBD;margin-left: 4.5rem;" id="switchmode_div">
					<span style="padding-right: 1rem;" id="audio_mode_1" class="audio_mode_group audio_mode_active">单击录音</span>
					<span id="audio_mode_2" class="audio_mode_group"  style="color: white; border-left: 1px solid white;padding-left: 1rem;" tapmode>按住录音</span>
				</div>
			</div>
		</div>


		<div id='more_div'  class="tab_area_div">
			<div class="text-content-tips"></div>
			<div class="aui-grid">
			    <div class="aui-row">
			        <div class="aui-col-xs-3" id="photo">
			            <i class="aui-iconfont aui-icon-image"></i>
			            <div class="aui-grid-label">相册</div>
			        </div>
			        <div class="aui-col-xs-3" id="camera">
			            <i class="aui-iconfont aui-icon-camera"></i>
			            <div class="aui-grid-label">拍照</div>
			        </div>
			      <!--  <div class="aui-col-xs-3" id="ppt" style="display:none;">
			            <i class="aui-iconfont aui-icon-edit"></i>
			            <div class="aui-grid-label">PPT</div>
			        </div>-->
			        <div class="aui-col-xs-3"  id="share" >
		        		<i class="aui-iconfont aui-icon-share"></i>
						<div class="aui-grid-label">分享</div>
		    		</div>
		    		<div class="aui-col-xs-3" id="pcstreamurl" style="">
		    		    <i class="aui-iconfont aui-icon-video"></i>
			            <div class="aui-grid-label">PC推流地址</div>
			       </div>
			    </div>
			    <div class="aui-row">

			        <div class="aui-col-xs-3" id="laud">
			            <i class="aui-iconfont aui-icon-laud"></i>
			            <div class="aui-grid-label">赏给APP</div>
			        </div>
			         <div class="aui-col-xs-3" id="like">
			            <i class="aui-iconfont aui-icon-like"></i>
			            <div class="aui-grid-label">收藏</div>
			        </div>
			    </div>
			</div>
		</div>
		<!--<div class="aui-content" id="audio-content-more" style="display:block;width:100%;height:4.5rem; background-color:white;position:relative;text-align: center;padding-top: 0.5rem;">
		<div class="aui-row">
		    <div class="aui-col-xs-3" tapmode onclick="launchpic()" >
		        <img style="height:2.5rem;display:block;margin-left: auto;margin-right: auto;" src="../res/room/album1.png">
				<div class="aui-grid-label">图片</div>
		    </div>
		    <div class="aui-col-xs-3"  tapmode onclick="openshare()" >
		        <img style="height:2.5rem;display:block;margin-left: auto;margin-right: auto;" src="../res/room/share_with_egg.png">
				<div class="aui-grid-label">分享</div>
		    </div>
		    <div class="aui-col-xs-3" tapmode onclick="dashang()">
		        <img style="height:2.5rem;display:block;margin-left: auto;margin-right: auto;" src="../res/room/dashang.png">
				<div class="aui-grid-label">捐赠</div>
		    </div>
		    <div class="aui-col-xs-3" tapmode onclick="onlike()">
		        <img style="height:2.5rem;display:block;margin-left: auto;margin-right: auto;" src="../res/room/unlike.png" data-liked="0" id="likeButton">
				<div class="aui-grid-label"  id="likeStr">喜欢</div>
		    </div>
		</div>-->




	</body>
	<script type="text/javascript" src="../script/api.js"></script>
	<script type="text/javascript" src="../script/api-extends-app.js"></script>
	<script type="text/javascript" id="appinit" data-baseurl="../script" src="../script/libs/require.js"></script>
	<script type="text/javascript">
		apiready = function() {
			appinit();
			api.parseTapmode();
		};
	</script>
</html>
